<script>
import * as echarts from "echarts";
import Charta from '../../components/echarts/charta.vue';
import WarnChart from '../../components/echarts/warn-chart.vue';
import DeviceChart from '../../components/echarts/device-chart.vue';
import {getDeviceNumber, getJiBie, getSanShi, getWarningTop5, getYiWuAndYanHuo} from "@/api/warning/wraning";
import {devPlayer, selectDeviceTree} from "@/api/device/device";
import LivePlayer from "@liveqing/liveplayer";
export default {
  name:"chart",
  components:{
    Charta,
    WarnChart,
    DeviceChart,
    LivePlayer
  },
//   component:Charta,
//   component:Warnchart,
  data(){
    return{
      liveUrls:[],
      deviceTree:[],
      dialogVisible: false,
      // 设备总数
      deviceSum:0,
      // 设备在线数
      deviceActive:0,
      //异物告警总数
      yiWuSum:0,
      //异物告警已处理
      yiWuChuLi:0,
      //烟火告警总数
      yanHuoSum:0,
      //烟火告警已处理
      yanHuoChuLi:0,
      //报警数据
      waringList:[],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tableData: [
          {
          device: '设备1',
          warnmsg: '异物告警',
          warntime: '2024-12-08',
          warnaddress:'上海市普陀区金沙江路 1518 弄'
        },{
          device: '设备1',
          warnmsg: '异物告警',
          warntime: '2024-12-08',
          warnaddress:'上海市普陀区金沙江路 1518 弄'
        },{
          device: '设备1',
          warnmsg: '异物告警',
          warntime: '2024-12-08',
          warnaddress:'上海市普陀区金沙江路 1518 弄'
        },{
          device: '设备1',
          warnmsg: '异物告警',
          warntime: '2024-12-08',
          warnaddress:'上海市普陀区金沙江路 1518 弄'
        }],
      mulColumnZZTData :{//告警趋势图
        xAxis: [{
          data: [],
          axisLabel: {
            show: true,
            textStyle: {color: '#ffffff'}
          },
          name: '日', //坐标轴名称
          nameLocation: 'end', //坐标轴名称显示位置，可选值start/middle[或者center]/end
          nameTextStyle:{
            color:'#ffffff'
          }
        }],
        // 图例
        legend: {
          data: ["告警数量", "告警已处理数量"],
          top: "7%",
          textStyle:{color: '#ffffff'//字体颜色
          }},
        title:{
          text:'前30天趋势分析',
          // subtext:'在此测试',
          x:'40',
          y:'20',
          textAlign:'left',
          textStyle:{color:'#ffffff',fontSize:14,fontWeight:"normal",},
        },
        yAxis: [{
          axisLabel: {
            show: true,
            textStyle: {color: '#ffffff'}
          }
        }],
        series: [
          {
            type: "bar", //形状为柱状图
            data: [],
            name: "告警数量", // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top"
            },
            backgroundStyle: {color: "#ffffff",},
            barGap: "0%", // 两个柱子之间的距离相对于柱条宽度的百分比;
            barCategoryGap: "100%" ,// 每侧空余的距离相对于柱条宽度的百分比
            //  showBackground:"#ffffff",
            itemStyle: {
              color:"#229DD8",
            }
          },
          {
            type: "bar", //形状为柱状图
            data: [],
            name: "告警已处理数量", // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top"
            },
            backgroundStyle: {color: "#ffffff",},
            barGap: "0%", // 两个柱子之间的距离相对于柱条宽度的百分比;
            barCategoryGap: "20%" ,// 每侧空余的距离相对于柱条宽度的百分比
            itemStyle: {
              color:"#DD5619",
            }
          }
        ]
      },
      deviceColumnZZTData1:{//设备运行状态图
        xAxis: [{
          axisLine: {
          show: true,    // 是否显示坐标轴轴线
          symbol: ['none'],     // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
          lineStyle: {
            color: '#4488BB',    // 坐标轴线线的颜色
            width: '1',    // 坐标轴线线宽
            type: 'solid',    // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
          }},
          axisLabel: {
            show: true,
            textStyle: {color: '#ffffff'}
          },
          splitLine:{//去除网格线
            show:false},
          // splitArea : {show : false}//去除网格区域
          axisTick: {
            show: false,    // 是否显示坐标轴刻度
          },

        }],
        // 图例
        legend: {
          top: "7%",
          // orient: "vertical",
          // icon: "inherit",
          padding: [10,20,0,0],
        itemWidth: 18,
        itemHeight: 10,
          textStyle:{color: '#ffffff'},//字体颜色
          data: [{
        name: '总数',
        itemStyle: {
            color: '#FF7F50'
          }
      },{
        name: '在线',
        itemStyle: {
          color: '#DA70D6'
        }
      }, {
        name: '离线',
        itemStyle: {
          color: '#32CD32'
        }
      }],
        },
        yAxis: [{
          max:0,
          data:["总数","在线","离线"],
          show: true, //是否显示y轴
          inverse: true,    // 是否是反向坐标轴
          axisLine: {
          show: true,    // 是否显示坐标轴轴线
          symbol: ['none'],     // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
          lineStyle: {
            color: '#4488BB',    // 坐标轴线线的颜色
            width: '1',    // 坐标轴线线宽
            type: 'solid',    // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
          }},
          axisLabel: {
            show: false,//是否显示刻度标签文字
          },
          splitLine:{//去除网格线
			      show:false},
          // splitArea : {show : false}//去除网格区域
          axisTick: {
            show: false,    // 是否显示坐标轴刻度
          },
        }],
        series: [
         {
            name:'总数',
            type: "bar", //形状为柱状图
            barCateGoryGap:'80%',
            data:[{
              value:25,
                itemStyle: {
                        color: "#FF7F50",//柱子颜色
                    },
            },null,null,null],
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "right",
            },
        },
          {
            name:'在线',
            type: "bar", //形状为柱状图
            barCateGoryGap:'80%',
            data:[null,null,{
              value:30,
                itemStyle: {
                        color: "#DA70D6",//柱子颜色
                    },
            },null],
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "right"
            },
        },
          {
            name:'离线',
            type: "bar", //形状为柱状图
            barCateGoryGap:'80%',
            data:[null,null,null,{
              value:3,
                itemStyle: {
                        color: "#32CD32",//柱子颜色
                    },
            }],
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "right"
            },
        }
        ]
    },
      WarnColumnZZTData2:{//告警分类统计
        xAxis: [{
          data: ["异物告警","烟火告警"],
          axisLine: {
          show: true,    // 是否显示坐标轴轴线
          symbol: ['none'],     // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
          lineStyle: {
            color: '#4488BB',    // 坐标轴线线的颜色
            width: '1',    // 坐标轴线线宽
            type: 'solid',    // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
          }},
          axisLabel: {
            show: true,
            textStyle: {color: '#ffffff'}
          },
          splitLine:{//去除网格线
            show:false},
          // splitArea : {show : false}//去除网格区域
          axisTick: {
            show: false,    // 是否显示坐标轴刻度
          },

        }],
        yAxis: [{
          show: true, //是否显示y轴
          axisLine: {
          show: true,    // 是否显示坐标轴轴线
          symbol: ['none'],     // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
          lineStyle: {
            color: '#4488BB',    // 坐标轴线线的颜色
            width: '1',    // 坐标轴线线宽
            type: 'solid',    // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
          }},
          axisLabel: {
            show: true,
            textStyle: {color: '#ffffff'}
          },
          splitLine:{//去除网格线
			      show:false},
          // splitArea : {show : false}//去除网格区域
        }],
        series: [
          {
            type: "bar", //形状为柱状图
            data: [0,0], //异物告警数量数据,烟火告警数
            name: "告警数量统计", // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top"
            },
            // backgroundStyle: {color: "#ffffff",},
            itemStyle: {
                color:"#FF7F50",
            }
          },
        ]

    },
      WarnLevelBZTData:{
      legend: {
        show: true,
        orient: "vertical",
        icon: "inherit",
        padding: [20,20,5,5],
        itemWidth: 18,
        itemHeight: 10,
        left: "right",
        top: "top",
        data:['级别一','级别二','级别三','级别四'],
        textStyle:{
          color:"#ffffff"
        }
      },
      color:['#FF7F50','#87CEFA','#DA70D6','#32CD32'],
      tooltip:{
            trigger:'item'
          },
      series: [{
          name: "告警级别统计",
          type: "pie",
          data:[
            {
              value:2,
              name:"级别一"
            },{
              value:2,
              name:"级别二"
            },{
              value:2,
              name:"级别三"
            },{
              value:2,
              name:"级别四"
            }
          ],
          label:{
            show:false
          },
          radius: ["30%","60%"],
          // startAngle: 90,
          // endAngle: "auto",
          center: ["50%","50%"],
          selectedMode:'single',
        }],
  },
      myChartStyle:{width: "100%", height: "330px"},
      myDeviceChartStyle1:{ width: "90%", height: "250px"},
      myWarnChartStyle2: {width: "100%", height: "250px" } ,//图表样式
      myWarnLevelChartStyle:{width: "100%", height: "250px"},
      c0:"c0",
      c1:"c1",
      c2:"c2",
      c3:"c3",
    }
  },
  created(){
    this.getDeviceNumber();
    this.getYiWuAndYanHuoNumber();
    this.getJiBie();
    this.getSanShi();
    this.getWarningTop5();
    this.getDeviceTree();
  },
  methods:{
    async handleNodeClick(data) {
      let channelId = data.channelId;
      this.channelId=channelId
      devPlayer(channelId).then(resp=>{
        this.liveUrls.unshift(resp.msg)
        this.dialogVisible=false
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    formatTimestamp(timestamp) {
      const date = new Date(timestamp * 1000); // 将十位数的秒级时间戳转换为毫秒级
      return date.toISOString(); // 返回ISO格式的日期和时间字符串
    },
    convertISOToCustomFormat(isoString) {
      const date = new Date(isoString);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    timestampToDateString(timestamp) {
      console.log(timestamp)
      const formattedDate = this.formatTimestamp(timestamp);
      const dateString = this.convertISOToCustomFormat(formattedDate);
      console.log(formattedDate); // 输出格式化的日期时间字符串
      // let year = date.getFullYear(); // 获取年份
      // let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份并补零
      // let day = date.getDate().toString().padStart(2, '0'); // 获取日期并补零
      // return year.toString() + month + day; // 拼接为 yyyymmdd 格式
      return dateString
    },
    //获取设备在线数和总数
    getDeviceNumber(){
      getDeviceNumber().then(res=>{
        this.deviceSum=res.data.deviceSum;
        this.deviceActive=res.data.deviceSum-res.data.deviceActive;
        this.deviceColumnZZTData1.series[0].data[0].value=res.data.deviceSum
        this.deviceColumnZZTData1.series[1].data[2].value=res.data.deviceSum-res.data.deviceActive
        this.deviceColumnZZTData1.series[2].data[3].value=res.data.deviceActive
        this.$refs.a2.initEcharts();
      })

    },
    getYiWuAndYanHuoNumber(){
      getYiWuAndYanHuo().then(res=> {
        this.yiWuSum = res.data.yiWuSum
        this.yiWuChuLi = res.data.yiWuChuLi
        this.yanHuoSum = res.data.yanHuoSum
        this.yanHuoChuLi = res.data.yanHuoChuLi
        let arr = [];
        arr.push(res.data.yiWuSum+res.data.yiWuChuLi);
        arr.push(res.data.yanHuoSum+res.data.yanHuoChuLi);
        console.log(arr)
        this.WarnColumnZZTData2.series[0].data=arr;
        this.$refs.b1.initEcharts();
      })
    },
    getJiBie(){
      getJiBie().then(res=>{
        this.WarnLevelBZTData.series[0].data[0].value=res.data.yi;
        this.WarnLevelBZTData.series[0].data[1].value=res.data.er;
        this.WarnLevelBZTData.series[0].data[2].value=res.data.san;
        this.WarnLevelBZTData.series[0].data[3].value=res.data.si;
        this.$refs.a1.initEcharts();
      })
    },
    getSanShi(){
      getSanShi().then(res=>{
        console.log(res)
        let dateArray=[];
        let sumArray=[];
        let chuLiArray=[];
        let list=res.data;
        list.reverse();
        for(let item of list){
          dateArray.push(item.date);
          sumArray.push(item.danSum);
          chuLiArray.push(item.chuLi);
        }
        console.log(sumArray)
        this.mulColumnZZTData.xAxis[0].data=dateArray
        this.mulColumnZZTData.series[0].data=sumArray
        this.mulColumnZZTData.series[1].data=chuLiArray
        this.$refs.c1.initEcharts()
      })
    },
    getWarningTop5(){
      getWarningTop5().then(res=>{
        this.waringList=res.data
      })
    },
    openChannel(){
      this.dialogVisible=true;
    },
    getDeviceTree(){
      selectDeviceTree().then(resp=>{
        this.deviceTree = resp.data
        console.log("******************deviceTree")
        console.log(this.deviceTree)
      })
    },

  },
}

</script>

<template>
  <div>
    <div class="pagebox" style="height: 90vh;min-height: 700px;">
        <el-row type="flex" justify="center" style="margin-bottom: 35px;">
            <el-col :span="8" class="col1">
                <div class="total">
                    <div class="left">
                        <img src="@/assets/ptz/devicetotal.png" alt="" class="img">
                        <div class="devicetotal">
                            <div class="label">设备总数</div>
                            <div class="value">{{deviceSum}}</div>
                        </div>
                    </div>
                    <div class="right">
                        <img src="@/assets/ptz/deviceuse.png" alt="" class="img">
                        <div class="deviceuse">
                            <div class="label">设备在线数</div>
                            <div class="value">{{deviceActive}}</div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8" class="col1">
                <div class="total">
                    <div class="left">
                        <img src="@/assets/ptz/foreigntotal.png" alt="" class="img">
                        <div class="devicetotal">
                            <div class="label">异物告警总数</div>
                            <div class="value" style="color: #23F3E6;">{{yiWuSum}}</div>
                        </div>
                    </div>
                    <div class="right">
                        <img src="@/assets/ptz/foreigndispose.png" alt="" class="img">
                        <div class="deviceuse">
                            <div class="label">异物告警已处理</div>
                            <div class="value" style="color: #23F3E6;">{{ yiWuChuLi }}</div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8" class="">
                <div class="total">
                    <div class="left">
                        <img src="@/assets/ptz/firetotal.png" alt="" class="img">
                        <div class="devicetotal">
                            <div class="label">烟火告警总数</div>
                            <div class="value" style="color: #FF4E4F;">{{ yanHuoSum }}</div>
                        </div>
                    </div>
                    <div class="right">
                        <img src="@/assets/ptz/firedispose.png" alt="" class="img">
                        <div class="deviceuse">
                            <div class="label">烟火告警已处理</div>
                            <div class="value" style="color: #FF4E4F;">{{ yanHuoChuLi }}</div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center" :gutter="20" style="display: flex;">
            <el-col :span="6">
                <div class="lefttop">
                    <div >
                      <i class="el-icon-pie-chart" style="font-size: 20px; color: #fff;margin-right: 10px;"></i><span class="label">告警级别统计</span>
                    </div>
                    <div>
                      <charta ref="a1" :cart-id="c3" :mulColumnZZTData="WarnLevelBZTData" :myChartStyle="myWarnLevelChartStyle"></charta>
                    </div>
                </div>
                <div class="leftbottom">
                    <div><i class="el-icon-data-line" style="font-size: 20px; color: #fff;margin-right: 10px;"></i><span class="label">设备运行状态统计</span></div>
                    <div>
                      <charta ref="a2" :cart-id="c1" :mulColumnZZTData="deviceColumnZZTData1" :myChartStyle="myDeviceChartStyle1"></charta>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="center">
                    <div><i class="el-icon-set-up" style="font-size: 20px; color: #fff;margin-right: 10px;"></i><span class="label">告警信息</span></div>
                    <el-row>
                        <el-col :span="24">
                            <div>
                                <charta ref="c1" :cart-id="c0" :mulColumnZZTData="mulColumnZZTData" :myChartStyle="myChartStyle"></charta>
                            </div>
                        </el-col>
                        <el-col :span="24">
                            <div class="warnmessage" style="position:relative;">
                                <div class="warn" style="width:80%;position:absolute;top:40px;left: 70px;">
                                  <div style="text-align:center;display: flex;flex-direction: column">
                                    <ul id="myul" style="margin: 0; padding: 0">
                                      <li>告警内容</li>
                                      <li style="width: 200px">告警时间</li>
                                      <li style="width: 200px">告警地点</li>
                                    </ul>
                                    <ul id="myul" style="margin: 0; padding: 0" v-for="(item,index) in waringList">
                                      <li>{{ item.algorName }}</li>
                                      <li style="width: 200px">{{ timestampToDateString(item.time) }}</li>
                                      <li style="width: 200px">{{ item.name }}</li>
                                    </ul>
                                  </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="righttop">
                    <div style="margin-bottom: 15px;"><i class="el-icon-monitor" style="font-size: 20px; color: #fff;margin-right: 10px;"></i>
                      <span class="label">监控视频</span>
                      <span class="label channel" style="margin-left: 10px;" @click="openChannel">选择通道</span>
                    </div>

                    <div v-if="liveUrls[0]==null" style="-webkit-display:flex;
                        display:flex;
                        -webkit-align-items:center;
                        align-items:center;
                        -webkit-justify-content:center;
                        justify-content:center;">
                        <img src="@/assets/img/videostart.png" alt=""  >
                    </div>
                    <div v-else>
                      <LivePlayer
                          ref="LivePlayer"
                          :videoUrl="liveUrls[0]"
                          fluent autoplay
                          live stretch
                          alt="请选择设备">
                      </LivePlayer>
                    </div>
                </div>
                <div class="rightbottom">
                    <div><i class="el-icon-bell" style="font-size: 20px; color: #fff;margin-right: 10px;"></i><span class="label">告警分类统计</span></div>
                    <div class="chart-container"  >
                        <!-- <Warn-Chart style=""></Warn-Chart> -->
                        <charta ref="b1" :cart-id="c2" :mulColumnZZTData="WarnColumnZZTData2" :myChartStyle="myWarnChartStyle2" style="margin-left: 10px"></charta>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>

    <el-dialog
        title="选择通道"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <div class="left-top">
        <el-tree class="tree" :data="deviceTree"  highlight-current :props="defaultProps" empty-text="暂无注册设备"	 @node-click="handleNodeClick">
          <span class = "custom-tree-node" slot-scope = " { node, data }">
            <div :class="data.onLine == 0 ? 'online-dev' : 'notOnline-dev'">
              <i class="device-icon" >
                <img src="@/assets/ptz/dir.png" v-if="data.parentId == 0">
                <img src="@/assets/ptz/lock.png" v-else-if="data.parentId != 0 && data.type == 0" style="vertical-align:middle">
                <img src="@/assets/ptz/demo.png" v-else-if="data.parentId != 0 && data.type == 1" style="vertical-align:middle">
              </i>
              <span :title="data.name+ '['+data.channelId+']'" class="titlename"> {{data.name}}</span>
            </div>
          </span>
        </el-tree>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.device-icon img{
  width: 20px;
  height: 20px;
  margin-right: 15px;
}
.channel:hover{
  cursor: pointer;
}
.tree{
  height: 100%;
  overflow: auto;
}
.pagebox{
    padding: 10px;
    padding-top: 30px;
    background-color: #081832;
}
.total{
    height: 100px;
    background-color: #034C6A;
    /* border-radius: 3%; */
    display: flex;
    padding-left: 15px;
}
.left {
    display: flex;
    align-items: center;
    flex: 1;

}
.left-top{
  flex: 0.5;
  background-color: #C4D8E6;
}
.right{
    display: flex;
    align-items: center;
    flex: 1;


}
.col1{
    margin-right: 30px;
}
.devicetotal{

}
.deviceuse{

}
.img{
    margin-right: 20px;
}
.label {
    font-size: 15px;
    margin-bottom: 10px;
    color: #fff;
}
.value {
    font-size: 25px;
    font-weight: bold;
    color: #FFFF43;
}
.lefttop{
    padding:2%;
    text-align: center;
    background-image: url('@/assets/img/smallborder.png');
    background-repeat:no-repeat;
    background-size: 100% 100%;
    /* height: 260px; */
    min-height: 260px;
    height: 33vh;
    margin-bottom: 10px;
    /* width: 380px;
    height: 262px;
    box-shadow: 0px 0px 6px 10px #004D67 inset;
    border: 1px solid #004D67; */
}
.leftbottom{
    padding:2%;
    /* display: flex;
    justify-content: center; */
    text-align: center;
    background-image: url('@/assets/img/smallborder.png');
    background-repeat:no-repeat;
    background-size: 100% 100%;
    /* height: 260px; */
    min-height: 260px;
    height: 33vh;
}
.center{
    padding:0.5%;
    /* display: flex;
    justify-content: center; */
    text-align: center;
    background-image: url('@/assets/img/bigborder.png');
    background-repeat:no-repeat;
    background-size: 100% 100%;
    /* height: 550px; */
    min-height: 550px;
    height: 70vh;
}
.righttop{
    padding:2%;
    /* display: flex;
    justify-content: center; */
    text-align: center;
    background-image: url('@/assets/img/smallborder.png');
    background-repeat:no-repeat;
    background-size: 100% 100%;
    /* height: 260px; */
    min-height: 260px;
    height: 33vh;
    margin-bottom: 10px;
}
.rightbottom{
    padding:2%;
    /* display: flex;
    justify-content: center; */
    text-align: center;
    background-image: url('@/assets/img/smallborder.png');
    background-repeat:no-repeat;
    background-size: 100% 100%;
    /* height: 260px; */
    min-height: 260px;
    height: 33vh;
}
.warnmessage{
    text-align: center;
    background-image: url('@/assets/img/warning.png');
    background-repeat:no-repeat;
    background-size: 90% 100%;
    height: 25vh;
    min-height: 170px;
    margin-left:60px;
    padding: 0 20px;
    margin-top:-20px;
}

 #myul li{
    float:left;
    width:100px;
    color: #fff;
    font-size: 14px;
   list-style-type: none;
}

</style>
